<template>
<div class="rx-input-icon">
    <div @click="iconselect()">
        <a-input ref="iconInput" :enterButton="i18n('form.selectIcon','选择图标')" placeholder="">
            <a-icon slot="prefix" v-if="!icon.includes('type')" :type="icon"/>
            <my-icon slot="prefix" v-else-if="customArr.includes(JSON.parse(icon).type)" :type="JSON.parse(icon).icon"></my-icon>
            <a-icon slot="prefix" v-else="JSON.parse(item.icon).type" :type="JSON.parse(icon).icon"></a-icon>
            <a-icon slot="suffix" type="close-circle" @click.stop="emitEmpty"/>
        </a-input>
    </div>
    <icon-selector-modal ref="modal" @ok="setIcon" :icon="icon"/>
</div>
</template>

<script>
import IconSelectorModal from '@/views/modules/system/core/IconSelectorModal.vue';
export default {
    name: "rx-input-icon",
    components:{
        IconSelectorModal
    },
    props:{
        value:{}
    },
    created() {
        this.init(this.value);
    },
    data(){
        return {
            icon:'',
            iconPc:'',
            customArr: ['customIcon', 'userCustomIcon','jpaasIcon']
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"insColumnDef",key);
        },
        init(o){
            this.icon = o ? o : '';
            let _icon = ''
            if(o){
                if(o.indexOf('type')>-1){
                    _icon = JSON.parse(o).icon;
                }else {
                    _icon = o ;
                }
            }
            this.iconPc = _icon;
        },
        iconselect() {
            this.$refs.modal.show()
        },
        setIcon(icon){
            this.iconPc = icon.icon ;
            this.icon = JSON.stringify(icon);
            this.$emit('input',JSON.stringify(icon))
            this.$emit('change',JSON.stringify(icon))
        },
        emitEmpty() {
            this.$refs.iconInput.focus();
            this.iconPc = '' ;
            this.$emit('input','');
            this.$emit('change','');
        },
    },
    watch:{
        value:{
            handler:function (o,ol){
                this.init(o);
            },
            deep:true
        }
    }
}
</script>

<style scoped>

</style>